<template>
  <el-container class="container">
    <el-aside class="header">
      <h6 class="header-title">{{ $t('webAuto.baobiaozhonxing')}}</h6>
      <el-menu :router="!hide" class="el-menu-vertical" :default-active="active" @select="handleSelect" :collapse="data.isCollapse" >
        <el-sub-menu index="1">
          <template #title>
            <el-icon>
              <Menu />
            </el-icon>
            <span>{{ $t('webAuto.MF')}}</span>
          </template>
          <!-- 菜单栏 -->
          <el-menu-item index="/workspace/report/contractManagementMF" class="menu-items"
            v-if="data.menus.includes('ContractManagementMF') || data.roles.includes('WFLOW_APPROVAL_ADMIN')">
            <template #title>
              <p class="title">{{ 'ContractManagementMF' }}</p>
            </template>
          </el-menu-item>
          <el-menu-item index="/workspace/report/paymentMF" class="menu-items"
            v-if="data.menus.includes('PaymentMF') || data.roles.includes('WFLOW_APPROVAL_ADMIN')">
            <template #title>
              <p class="title">{{ 'PaymentMF' }}</p>
            </template>
          </el-menu-item>
          <el-menu-item index="/workspace/report/reimbursementForPrivateMF" class="menu-items"
            v-if="data.menus.includes('ReimbursementForPrivateMF') || data.roles.includes('WFLOW_APPROVAL_ADMIN')">
            <template #title>
              <p class="title">{{ 'ReimbursementForPrivateMF' }}</p>
            </template>
          </el-menu-item>
          <el-menu-item index="/workspace/report/reimbursementToCorporateMF" class="menu-items"
            v-if="data.menus.includes('ReimbursementToCorporateMF') || data.roles.includes('WFLOW_APPROVAL_ADMIN')">
            <template #title>
              <p class="title">{{ 'ReimbursementToCorporateMF' }}</p>
            </template>
          </el-menu-item>
          <el-menu-item index="/workspace/report/longTermAssetReportMF" class="menu-items"
                        v-if="data.menus.includes('LongTermAssetReportMF') || data.roles.includes('WFLOW_APPROVAL_ADMIN')">
              <template #title>
                  <p class="title">{{ 'LongTermAssetReportMF' }}</p>
              </template>
          </el-menu-item>
          <el-menu-item index="/workspace/report/longTermAssetsPayableMF" class="menu-items"
                        v-if="data.menus.includes('LongTermAssetsPayableMF') || data.roles.includes('WFLOW_APPROVAL_ADMIN')">
              <template #title>
                  <p class="title">{{ 'LongTermAssetsPayableMF' }}</p>
              </template>
          </el-menu-item>
          <el-menu-item index="/workspace/report/constructionInProgressReportMF" class="menu-items"
                        v-if="data.menus.includes('ConstructionInProgressReportMF') || data.roles.includes('WFLOW_APPROVAL_ADMIN')">
              <template #title>
                  <p class="title">{{ 'ConstructionInProgressReportMF' }}</p>
              </template>
          </el-menu-item>
          <el-menu-item index="/workspace/report/standardInventoryPayableReportMF" class="menu-items"
                        v-if="data.menus.includes('MF_Standard_InventoryPayable') || data.roles.includes('WFLOW_APPROVAL_ADMIN')">
              <template #title>
                  <p class="title">{{ 'InventoryPayableReportMF-标准应付' }}</p>
              </template>
          </el-menu-item>
          <el-menu-item index="/workspace/report/costInventoryPayableReportMF" class="menu-items"
                        v-if="data.menus.includes('MF_Standard_InventoryPayable') || data.roles.includes('WFLOW_APPROVAL_ADMIN')">
            <template #title>
              <p class="title">{{ 'CostPayableReportMF-费用应付' }}</p>
            </template>
          </el-menu-item>
          <el-menu-item index="/workspace/report/inventoryEstimatedPayableReportMF" class="menu-items"
                        v-if="data.menus.includes('InventoryEstimatedPayableReportMF') || data.roles.includes('WFLOW_APPROVAL_ADMIN')">
            <template #title>
              <p class="title">{{ 'MF存货暂估应付' }}</p>
            </template>
          </el-menu-item>
          <el-menu-item index="/workspace/report/purchaseRequestMFReport" class="menu-items"
                        v-if="data.menus.includes('PurchaseRequestMFReport') || data.roles.includes('WFLOW_APPROVAL_ADMIN')">
            <template #title>
              <p class="title">{{ 'PurchaseRequestMFReport' }}</p>
            </template>
          </el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
            <el-icon><Management /></el-icon>
            <span>人力资源中心GHR</span>
          </template>
          <!-- 菜单栏 -->
          <el-menu-item index="/workspace/report/wPSQReport" class="menu-items"
                        v-if="data.menus.includes('WPSQReport') || data.roles.includes('WFLOW_APPROVAL_ADMIN')">
            <template #title>
              <p class="title">外派申请</p>
            </template>
          </el-menu-item>
          <el-menu-item index="/workspace/report/qZBLReport" class="menu-items"
                        v-if="data.menus.includes('QZBLReport') || data.roles.includes('WFLOW_APPROVAL_ADMIN')">
            <template #title>
              <p class="title">签证办理</p>
            </template>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>
    <!-- 跳转页面 首页报表跳转-->
    <el-container class="container">
      <router-view v-if="!hide"></router-view>
      <div v-else style="height:100%;width:100%">
        <ContractManagementMF v-if="data.show=='/workspace/report/contractManagementMF'"></ContractManagementMF>
        <PaymentMF v-if="data.show=='/workspace/report/paymentMF'"></PaymentMF>
        <ReimbursementForPrivateMF v-if="data.show=='/workspace/report/reimbursementForPrivateMF'"></ReimbursementForPrivateMF>
        <ReimbursementToCorporateMF v-if="data.show=='/workspace/report/reimbursementToCorporateMF'"></ReimbursementToCorporateMF>
        <LongTermAssetReportMF v-if="data.show=='/workspace/report/longTermAssetReportMF'"></LongTermAssetReportMF>
        <LongTermAssetsPayableMF v-if="data.show=='/workspace/report/longTermAssetsPayableMF'"></LongTermAssetsPayableMF>
        <ConstructionInProgressReportMF v-if="data.show=='/workspace/report/constructionInProgressReportMF'"></ConstructionInProgressReportMF>
        <SandardInventoryPayableReportMF v-if="data.show=='/workspace/report/standardInventoryPayableReportMF'"></SandardInventoryPayableReportMF>
        <CostInventoryPayableReportMF v-if="data.show=='/workspace/report/costInventoryPayableReportMF'"></CostInventoryPayableReportMF>
        <InventoryEstimatedPayableReportMF v-if="data.show=='/workspace/report/inventoryEstimatedPayableReportMF'"></InventoryEstimatedPayableReportMF>
        <WPSQReport v-if="data.show=='/workspace/report/wPSQReport'"></WPSQReport>
        <QZBLReport v-if="data.show=='/workspace/report/qZBLReport'"></QZBLReport>
        <PurchaseRequestMFReport v-if="data.show=='/workspace/report/purchaseRequestMFReport'"></PurchaseRequestMFReport>
      </div>
    </el-container>
  </el-container>
</template>

<script setup>
import { onMounted, reactive } from "vue"
import { useRouter, useRoute } from "vue-router";
import ContractManagementMF from "@/views/report/MF/ContractManagementMF.vue"
import PaymentMF from "@/views/report/MF/PaymentMF.vue"
import ReimbursementForPrivateMF from "@/views/report/MF/ReimbursementForPrivateMF.vue"
import ReimbursementToCorporateMF from "@/views/report/MF/ReimbursementToCorporateMF.vue"
import LongTermAssetReportMF from "@/views/report/MF/LongTermAssetReportMF.vue"
import LongTermAssetsPayableMF from "@/views/report/MF/LongTermAssetsPayableMF.vue"
import ConstructionInProgressReportMF from "@/views/report/MF/ConstructionInProgressReportMF.vue"
import SandardInventoryPayableReportMF from "@/views/report/MF/StandardInventoryPayableReportMF.vue"
import CostInventoryPayableReportMF from "@/views/report/MF/CostInventoryPayableReportMF.vue";
import InventoryEstimatedPayableReportMF from "@/views/report/MF/InventoryEstimatedPayableReportMF.vue";
import WPSQReport from "@/views/report/HR/WPSQReport.vue";
import QZBLReport from "@/views/report/HR/QZBLReport.vue";
import PurchaseRequestMFReport from "@/views/report/MF/PurchaseRequestMFReport.vue";

const route = useRoute();
const router = useRouter();

const data = reactive({
  isCollapse: false,
  show:'',
  menus: localStorage.getItem('menus') || '',
  roles: localStorage.getItem('roles') || '', // 角色判断显示权限
})

onMounted(() => {
  data.menus = localStorage.getItem('menus') || ''
})

const props = defineProps({
  hide: { type: Boolean, default: false }
})

const active = () => {
  if (route.path === '/workspace/report') {
    return route.push('/workspace/report')
  }
  return route.path
}
const handleSelect = (e) => {
   data.show=e
}
</script>

<style scoped lang="less">
.container {
  height: 100% !important;
  overflow: hidden !important;
  margin: 0 10px 0 0;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
}

.header {
  max-width: 15%;
  height: 100%;
  background-color: #f7f7f9;

  .header-title {
    height: 30px;
    margin: 0 !important;
    background-color: #fff;
    font-size: 19px;
    position: relative;
    padding-left: 7px;
  }

  .header-title::after {
    content: "";
    height: 20px;
    width: 3px;
    background-color: #333;
    position: absolute;
    left: 2px;
    top: 3px;
  }
}

.m-aside-menu {
  position: fixed;
  z-index: 999;
  height: 100vh;
}

.el-menu-vertical {
  padding: 5px 0;
  text-align: left;

  .menu-items {
    width: 100%;
    height: 30px !important;
    padding: 0 10px 0 35px !important;
    text-align: left;

    .title {
      width: 100%;
      line-height: 30px !important;
      text-align: left;
    }
  }
}


:deep(.container) {
  background: white;
  height: 100vh;
  overflow: hidden;
  margin-left: 10px;

  .el-header {
    position: relative;
    line-height: 30px;

    .action {
      position: absolute;
      height: 30px;
      line-height: 30px;

      :deep(.icon) {
        cursor: pointer;
        padding: 5px;
      }
    }
  }

  .user-avatar {
    cursor: pointer;
    position: absolute;
    right: 30px;
    height: 60px;
  }

  .message {
    position: absolute;
    right: 170px;
    margin: -10px auto;

    .icon {
      font-size: 18px;
      color: #a2a4a8;
      padding: 1px;
      cursor: pointer;

      &:hover {
        color: #6d6e70;
      }
    }
  }
}
</style>
